<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <script src="../../js/jquery-1.4.2.js"></script>
    <style>
        body{
            font-family: "微软雅黑";
        }
        div,span{
            width:140px;
            height: 140px;
            margin:20px;
            border:1px solid #000;
            float:left;
            font-size:17px;
            font-family: Roman;
        }

        div.mini{
            width:40px;
            height:43px;
            background:#CC66FF;
            border : 1px solid #000;
            font-size:12px;
            font-family: Roman;
        }
        input{
            margin:5px 5px;
        }
    </style>
</head>
<body>
<input type="button" value="改变元素名为div的所有元素的背景颜色为#FF6984" id="b1" >
<input type="button" id="b2" value="改变id为one的元素的背景颜色为#9ACD32">
<input type="button" id="b3" value="改变class为mini 的所有元素背景颜色为#FF0033">
<input type="button" id="b4" value ="改变所有<span>元素和id为two的，id为one的,class为mini的所有元素的背景色为#006400">


    <h1>天气热了</h1>
    <h2>天气很热了</h2>

    <div class="one">
        class是one
        <div class="mini">class是mimi</div>
        <div class="mini">class是mini</div>
    </div>

  <div class="one">
        class是one
        <div class="mini01">class是mimi01</div>
        <div class="mini">class是mini</div>
    </div>

    <div id="one">id是one</div>

    <div id="two" class="mini">
        id为two,class是mini
        <div class="mini">class是mini</div>
    </div>

    <br>

    <div id="mover">动画</div>

    <br>
    <span class="spanone">span</span>
    <span class="mini">span class是mini</span>




</body>
<script>
    //让整个页面加载完成就执行
    $(function(){
        //1. 给按钮一绑定事件 改变元素名为div的所有元素的背景颜色为#FF6984
        //$("#b1").click(function(){})相当于
        // var oBtn1 = document.getElementById("b1")
        // oBtn1.onclick = function(){}
        $("#b1").click(function(){
            // 元素选择器
            $("div").css("background-color","#FF6984")
        })

        //2.改变id为one的元素的背景颜色为#9ACD32
        $("#b2").click(function(){
            //id选择器
            $("#one").css("background-color","#9ACD32")
        })

        //3.改变class为mini 的所有元素背景颜色为#FF0033
        $("#b3").click(function(){
            //类选择器
            $(".mini").css("background-color","#FF0033")
        })

        //4.改变所有<span>元素和id为two的，id为one的,class为mini的所有元素的背景色为#006400
        $("#b4").click(function(){
            $("span,#two,#one,.mini").css("background-color","#006400")
        })
    })
</script>
</html>